<div class="monitor-search-view">
  <form class="center-align" #searchForm="ngForm" novalidate>
    <!-- <button mat-raised-button color="primary" (click)="search()" [disabled]="!searchForm.valid">搜索</button> -->
    <!-- 品牌 -->
    <div *ngIf="type=='brand'">
      <mat-input-container class="example-full-width">
        <input matInput [placeholder]="'关键词搜索'|translate" type="text" name="keyWords" [(ngModel)]="keyWords" #keyWordsV="ngModel" required />
      </mat-input-container>
      <button mat-raised-button color="primary" (click)="search()" [disabled]="!searchForm.valid">{{'搜索'|translate}}</button>
    </div>
    <!-- 宝贝 -->
    <div *ngIf="type=='product'" class="shopToggelSearch">
      <mat-button-toggle-group #group="matButtonToggleGroup">
        <mat-button-toggle value="key" [checked]="true">
          <span class="font-size-12">{{'关键词'|translate}}</span>
        </mat-button-toggle>
        <mat-button-toggle value="id" (click)="searchClear()">
          <span class="font-size-12">{{'id搜索'|translate}}</span>
        </mat-button-toggle>
      </mat-button-toggle-group>
      <mat-input-container class="mp0" *ngIf="group.value=='key'">
        <input matInput [placeholder]="'关键词搜索'|translate" [(ngModel)]="keyWords" name="productSearch" />
        <mat-icon matPrefix fontIcon="fa-search" style="color:rgba(0,0,0,.87);"></mat-icon>
      </mat-input-container>
      <mat-input-container class="mp0" *ngIf="group.value=='id'">
        <input matInput [placeholder]="'宝贝id搜索'|translate" [(ngModel)]="keyId" name="productId" />
        <mat-icon matPrefix fontIcon="fa-search" style="color:rgba(0,0,0,.87);"></mat-icon>
      </mat-input-container>
      <button mat-raised-button color="primary" (click)="search()">{{'搜索' |translate}}</button>
    </div>
    <!-- 店铺 -->
    <div *ngIf="type=='shop'" class="shopToggelSearch">
      <mat-button-toggle-group #group="matButtonToggleGroup">
        <mat-button-toggle value="key" [checked]="true">
          <span class="font-size-12">{{'关键词'|translate}}</span>
        </mat-button-toggle>
        <mat-button-toggle value="id" (click)="searchClear()">
          <span class="font-size-12">{{"id搜索"|translate}}</span>
        </mat-button-toggle>
      </mat-button-toggle-group>
      <mat-input-container class="mp0" *ngIf="group.value=='key'">
        <input matInput [placeholder]="'关键词搜索'|translate" [(ngModel)]="keyWords" name="shopSearch" />
        <mat-icon matPrefix fontIcon="fa-search" style="color:rgba(0,0,0,.87);"></mat-icon>
      </mat-input-container>
      <mat-input-container class="mp0" *ngIf="group.value=='id'">
        <input matInput [placeholder]="'店铺id搜索'|translate" [(ngModel)]="keyId" name="shopId" />
        <mat-icon matPrefix fontIcon="fa-search" style="color:rgba(0,0,0,.87);"></mat-icon>
      </mat-input-container>
      <button mat-raised-button color="primary" (click)="search()">{{'搜索'|translate}}</button>
    </div>
  </form>
</div>
<div class="well white mt10" style="position: relative;">
  <ngx-busy [busy]="busy"></ngx-busy>
  <div class="monitor-search-result-view">
    <!-- 宝贝添加 -->
    <div *ngIf="type=='product'">
      <table class="responsive-table bordered highlight">
        <thead>
          <tr>
            <th class="productTh">{{'商品'|translate}}</th>
            <th class="titleTh">{{'标题'|translate}}</th>
            <th>{{'品牌'|translate}}</th>
            <th>{{'类目'|translate}}</th>
            <th>{{'监控'|translate}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let prod of vm.table.table | paginate: { itemsPerPage: param.rows, currentPage: vm.page, totalItems: vm.table.count,id: 'monitor_add_table'};let $index = index;">
            <td>
              <a href="https://item.taobao.com/item.htm?id={{prod.numberId}}" target="_blank">
                <img [src]="prod.picUrl" class="w80">
              </a>
            </td>
            <td>
              <div class="product-p">
                <span class="product-title normal" [title]="prod.title" [innerHTML]="prod.title | highlight:param.q"></span>
                <!-- taobao -->
                <a class="grey-text" title="去淘宝" href="https://item.taobao.com/item.htm?id={{prod.numberId}}" target="_blank"><i class="fa fa-external-link cp f16"></i></a>
              </div>
              <p class="nick-p">
                <span class="taobao-icon" [ngClass]="{'icon-service-tianmao':prod.shopType=='商城','icon-service-taobao':prod.shopType=='C店','icon-service-tianmaoguoji':prod.shopType=='天猫国际','icon-fest-quanqiugou':prod.shopType=='全球购'}"></span>
                <span class="mr4">{{prod.shopName}}</span>
                <!-- taoabao -->
                <a class="grey-text" title="去淘宝" href="http://store.taobao.com/shop/view_shop.htm?user_number_id={{prod.uid}}" target="_blank"><i class="fa fa-external-link cp f16"></i></a>
              </p>
            </td>
            <!-- 品牌 -->
            <td>{{prod.brandName || '-'}}</td>
            <td>
              <span class="text-overflow" [title]="prod.catName | categoryName">{{prod.catName | categoryName}}</span>
            </td>
            <td>
              <monitor-slide-toggel type="product" [data]="prod"></monitor-slide-toggel>
            </td>
          </tr>
          <tr *ngIf="vm.table.table.length ==0">
            <td colspan="5" class="center-align">{{'暂无搜索结果'|translate}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 店铺添加 -->
    <div *ngIf="type=='shop'">
      <table class="responsive-table bordered highlight">
        <thead>
          <tr>
            <th>{{'店铺名称'|translate}}</th>
            <th>{{'主营类目'|translate}}</th>
            <th>{{'店铺等级'|translate}}</th>
            <th>{{'监控'|translate}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let shop of vm.table.table | paginate: { itemsPerPage: param.rows, currentPage: vm.page, totalItems: vm.table.count,id: 'monitor_add_table'};let $index = index;">
            <td>
              <p class="nick-p left-align">
                <span class="taobao-icon" [ngClass]="{'icon-service-tianmao':shop.shopType=='商城','icon-service-taobao':shop.shopType=='C店'||shop.shopType==null,'icon-service-tianmaoguoji':shop.shopType =='天猫国际','icon-fest-quanqiugou':shop.shopType =='全球购'}"></span>
                <span class="text-overflow width180" [title]="shop.shopName" [innerHTML]="shop.shopName | highlight:param.shopName"></span>
                <!-- taoabao -->
                <a class="grey-text" title="去淘宝" href="http://store.taobao.com/shop/view_shop.htm?user_number_id={{shop.uid}}" target="_blank"><i class="fa fa-external-link cp f16"></i></a>
              </p>
            </td>
            <td>{{shop.mainCategory | categoryName}}</td>
            <td>
              <span style="display: none" hidden ng-bind="shop.shopLevelSrc"></span>
              <img src="http://trendata.oss-cn-hangzhou.aliyuncs.com/marketconditions/credit{{shop.shopLevelType}}.png" style="width: 18px;" *ngFor="let i of shop.shopLevels;let $index = index" />
            </td>
            <td>
              <monitor-slide-toggel type="shop" [data]="shop"></monitor-slide-toggel>
            </td>
          </tr>
          <tr *ngIf="vm.table.table.length ==0">
            <td colspan="4" class="center-align">{{'暂无搜索结果'|translate}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 品牌添加 -->
    <div *ngIf="type=='brand'">
      <table class="responsive-table bordered highlight">
        <thead>
          <tr>
            <th>{{'品牌名称'|translate}}</th>
            <th>{{'类目'|translate}}</th>
            <th>{{'动销店铺数'|translate}}</th>
            <th>{{'动销宝贝数'|translate}}</th>
            <th>{{'监控'|translate}}</th>
          </tr>
        </thead>
        <tbody>
          <tr class="repeat-item" *ngFor="let brand of vm.table.table  | paginate: { itemsPerPage: param.rows, currentPage: vm.page, totalItems: vm.table.count,id:'monitor_add_table'};let $index = index;">
            <td>
              <span [innerHTML]="brand.brandName | highlight:param.brandNameSearch"></span>
            </td>
            <td>{{brand.categoryName | categoryName}}</td>
            <td>{{brand.shopNum}}</td>
            <td>{{brand.productNum}}</td>
            <td>
              <monitor-slide-toggel type="brand" [data]="brand"></monitor-slide-toggel>
            </td>
          </tr>
          <tr *ngIf="vm.table.table.length ==0">
            <td colspan="4" class="center-align">{{'暂无搜索结果'|translate}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <pagination-controls class="center-align pt20" id="monitor_add_table" (pageChange)="pageChanged($event)" maxSize="9" directionLinks="true" autoHide="true">
    </pagination-controls>
  </div>
</div>
